<template>
    <view class="popup_item">
        <view class="popup_top">
            <view class="item_img">
                <view class="item_img_image">
                    <image v-if="sku_info.product_image" :src="sku_info.product_image" mode=""></image>
                    <image v-else src="../../static/images/my/noPictures.png" mode=""></image>
                </view>
                <view class="item_text">
                    <view class="info_title">
                        {{ sku_info }}
                        {{ goods_info.spu_name }}
                    </view>
                    <view class="info_lat">
                        已选： {{ sku_info.diy_name }}
                    </view>
                    <view class="info_code">
                        存货编码： {{ sku_info.product_id }}
                    </view>
                </view>
            </view>
            <!-- <view class="item_sku" v-for="(item, index) in sku_list" :key="index">
                <view class="sku_list">
                    <view class="sku_title">
                        {{ item.title }}
                    </view>
                    <view class="sku_type">
                        <text v-bind:class="[item2.isShow ? '' : 'del', subIndex[index] == index2 ? 'check' : '']"
                            @click="specificationBtn(item2.title, index, $event, index2, item2.isShow)"
                            v-for="(item2, index2) in item.options" :key="index2">{{
                                item2.title }}</text>
                    </view>
                </view>
            </view> -->
        </view>
        <view class="popup_bottom">
            <!-- <view class="bottom_top flex">
                <view class="price prine">
                    ￥ <text>{{ Number(sku.sku_img.old_product_price).toFixed(2) }}</text>
                </view>
                <nut-input-number style="color: #f24839;" v-model="state.num" button-size="30" input-width="50" />
            </view> -->
            <view class="bottom_bottom flex">
                <view class="btn_left">
                    充300送20
                </view>
                <view class="btn_right " @click="addCartList(item)">
                    加入购物车
                </view>
            </view>
        </view>
    </view>
</template>
<script setup>
import { ref } from 'vue'
import { onShow, onLoad } from '@dcloudio/uni-app'
const props = defineProps({
    show: {
        type: Boolean,
        default: false,
    },
    sku_info: {
        type: Object,
    },
    goods_info: {
        type: Object,
    },
    sku_list: {
        type: Array,
    }
})
console.log('props', props);

const subIndex = ref([])
onShow(() => {
    console.log('item');
})
onLoad(() => {
    console.log('欢迎您,many_sku');
})

const specificationBtn = (item, n, event, index, sts) => {
    if (sts) {
        if (state.value.selectArr[n] != item) {
            state.value.selectArr[n] = item; //当前规格选中,赋值为选项的名字(蓝色、黑色)
            state.value.subIndex[n] = index; //设置此项为选中
        } else {
            state.value.selectArr[n] = "";
            state.value.subIndex[n] = -1; //去掉选中的颜色
        }
        // switchSku()
        checkItem()
    } else {
        uni.showToast({
            title: '不能选择',
            icon: 'none'
        })
    }

}

const checkItem = () => {
    //var self = this;
    var option = sku.value.sku_list;
    var result = []; //定义数组储存被选中的值
    // state.value.selectArr = sku.value.select_sku.split(',')
    for (var i in option) {
        //初始化被选中的数组，如果此类别没被选中，则赋值为空，如果有3个类别，则数组长度为3
        result[i] = state.value.selectArr[i] ? state.value.selectArr[i] : "";
    }
    //默认选项
    var isNullOpt = true;
    for (var i in result) {
        if (result[i] != "") {
            isNullOpt = false;
            break;
        }
    }
    //console.log()
    if (isNullOpt) {
        result = sku.value.select_sku.split(",");
        for (var i in option) {
            for (var k in option[i].options) {
                if (option[i].options[k].title == result[i]) {
                    state.value.selectArr[i] = result[i];
                    state.value.subIndex[i] = k;
                    break;
                }
            }
        }
    }
    // 获取默认选项
    // let arr = sku.value.sku_list
    // let check = sku.value.select_sku.split(',')
    // for (const i in arr) {
    // 	for (const k in arr[i].options) {
    // 		console.log(arr[i].options[k]);
    // 		if (arr[i].options[k].title == check[i]) {
    // 			state.value.subIndex[i] = k
    // 		}
    // 	}
    // }
    //便利每个类别的每个小项
    for (var i in option) {
        var last = result[i]; //把选中的值存放到字符串last去
        for (var k in option[i].options) {
            result[i] = option[i].options[k].title; //获取每个小项的值(如：红色、蓝色)，并临时存放于result[i]，存在直接覆盖，不存在往里面添加name值
            option[i].options[k].isShow = isMay(result); //result数组每一次修改都将计算一次是否可以选择，添加字段isShow来判断是否可以选择
        }
        result[i] = last; //还原，目的是记录点下去那个值，避免下一次执行循环时被覆盖
    }
    //如果可获取sku，则显示当前sku价格
    if (state.value.shopItemInfo[result]) {
        sku.value.sku_img = state.value.shopItemInfo[result]
    }

}
const isMay = (result) => {
    for (var i in result) {
        if (result[i] == "") {
            return true; //如果数组里有为空的值，则表示未被全部选择，无法获取sku，直接返回true
        }
    }
    //result选满，可获取sku，根据初始化时shopItemInfo的difference[i].difference键值对(200,蓝色)可获取sku信息

    return state.value.shopItemInfo[result].isabled == '不能' ? false : true; //匹配选中的数据的库存，若不为空返回true反之返回false
}
</script>
<style scoped lang='scss'>
@import '../../style/placeOrder/index.scss';
</style>